<template>
    <div>
        <!--   <div style="margin-top: 1%">
             <el-breadcrumb separator="/">
               <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
               <el-breadcrumb-item>活动列表</el-breadcrumb-item>
               <el-breadcrumb-item>活动详情</el-breadcrumb-item>
             </el-breadcrumb>
           </div>-->
        <!--搜索区域-->
        <div>
            <el-form :inline="true" :model="formInline">
                <el-form-item label="制单人">
                    <el-input v-model="formInline.user" placeholder="制单人"></el-input>
                </el-form-item>
                <el-form-item label="档案状态"  prop="type">
                    <el-select v-model="form.region" placeholder="请选择档案状态">
                        <el-option label="使用中" value="shanghai"></el-option>
                        <el-option label="停用中" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handelAdd">添加</el-button>
                </el-form-item>
            </el-form>

            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column v-for="item in tableColumn "
                                 :prop="item.prop"
                                 :label="item.label"
                                 :width="item.width">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                    <template slot-scope="scope">
                        <el-button @click="handleChangeStatus(scope.row)" type="text" size="small">修改状态</el-button>
                        <el-button type="text" size="small"@click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="tableData.length">
            </el-pagination>

            <!--添加-->
            <el-dialog title="收货地址" :visible.sync="showAddDialog">
                <el-form :model="form" :rules="rules" ref="ruleform" label-width="80px">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="仓库名"  prop="ckmc">
                                <el-input v-model="form.ckmc" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="仓库类型"  prop="cklx">
                                <el-input v-model="form.cklx" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="负责人"  prop="fzr">
                                <el-input v-model="form.fzr" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="地址"  prop="address">
                                <el-input v-model="form.address" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="仓库代码"  prop="ckdm">
                                <el-input type="number" v-model="form.ckdm" autocomplete="off"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="showAddDialog = false">取 消</el-button>
                    <el-button type="primary" @click="handleConfine">确 定</el-button>
                </div>
            </el-dialog> </div>

    </div>
</template>

<script>
  import { mapActions ,mapMutations} from 'vuex';
  export default {
    name: 'index',
    data() {
      return {
        currentPage: 1,
        pageSize: 10,
        formInline: {
          user: '',
          region: '',

        },
        tableColumn: [
          {
            prop: 'ckdm',
            label: '仓库代码',
          }, {
            prop: 'ckmc',
            label: '仓库名称',
          }, {
            prop: 'cklx',
            label: '仓库类型',
          }, {
            prop: 'fzr',
            label: '负责人',
          }, {
            prop: 'address',
            label: '地址',
          }, {
            prop: 'dazt',
            label: '档案状态',
          },
        ],
        tableData: this.$store.getters.cangkuDatas,
        showAddDialog: false,
        dialogFormVisible: false,
        form: {
          ckdm: '',
          ckmc: '',
          cklx: '',
          fzr: '',
          address: '',
          dazt: '使用中',
        },
        rules: {
          ckdm: [
            { required: true, message: '请输入仓库代码', trigger: 'blur' },
          ],
          ckmc: [
            { required: true, message: '请输入仓库名', trigger: 'blur' },
          ],
          cklx: [
            { required: true, message: '请输入仓库类型', trigger: 'blur' },
          ],
          fzr: [
            { required: true, message: '请输入负责人', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入地址', trigger: 'blur' },
          ],

        }
      };
    }
    ,
    mounted() {
      console.log(this.$store.getters.skuDatas);
      console.log(this.$store.getters.cangkuDatas);
      this.tableData  = this.$store.getters.cangkuDatas;
    },
    methods: {
      ...mapMutations('dataManagement', ['addcangkuDatas', 'updateCangkuDatas','deleteCangkuDatas']),
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      //确认添加
      handleConfine() {
        var validate = false;
        this.$refs['ruleform'].validate((valid) => {
          if (valid) {
            validate = true;
          } else {
            console.log('error submit!!');
            validate = false;
            return false;
          }
        });
        if (validate === false) {
          return;
        }
        setTimeout(()=>{
          this.form.id = Math.ceil(Math.random()*100);
          // this.tableData.push(this.form);
          // this.$store.commit('addSkuDatas',this.form)
          this.addcangkuDatas(this.form)
        },2000)
        this.showAddDialog = false;
        this.$message.success("添加成功!");

      },
      handleDelete(row){
        this.$confirm('是否确定删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          this.deleteCangkuDatas(row.id)
        }).catch(() => {
        });
      },
      //确认订单状态
      handleChangeStatus(row){
        this.updateCangkuDatas(row.id)
      },
      handelAdd(){
        this.showAddDialog = true;
      },
      onSubmit(){

      }
    },
  };
</script>

<style scoped>

</style>
